<template>
   <div id="productList">
		<el-row>
			<el-col :span="8" v-for="list in newList">
				<el-card :body-style="{ padding: '0px' }">
					<router-link :to="{ path: 'assetsdetail', query: { assetid:list.id }}">	
						<div class="pro_img">
							<img src="../../../public/images/img1.jpg"/>
							<p>{{ list.introduction | limitBy('12') }}<span><i class="iconfont">&#xe60f;</i>{{ list.heat }}</span></p>
						</div>
						<div class="pro_contant">
							<p><span>标的名称：</span>{{ list.title }}</p>
							<p><span>标的简介：</span>{{ list.introduction | limitBy('15') }}</p>
							<p><span>评估价：</span><font>￥{{ list.price}}</font>万元</p>
							<p class="search_more"><i class="iconfont">&#xe607;</i><span>查看更多</span></p>
						</div>
					</router-link>	
					<!--</div>-->
				</el-card>
			</el-col>
		</el-row>
	</div>
</template>

<script>
    export default {
        name:'productList',
        data(){
        	return {
        		assetId:'',
                assetsList:[]
			}
        },
        props: ['assetsType'],
        mounted: function () {
			this.getList();
		},
        methods:{
            getList() {
            	const _this = this;
				this.axios.get(_this.$store.state.Check.url + '/get_products',{
					params: {
						slug : localStorage.slug,
						list_name : 'featured_products',
						type : this.assetsType ,
					}
				}).then(function(response){
					_this.assetsList = response.data;
				}).catch(err => {
                    this.$notify({
                        title: '警告',
                        message: '网络出错了~再试试吧~',
                        type: 'warning'
                    });
                });
          }
		},

		computed: {
			newList() {
				return this.assetsList.slice(0,3);
			}
		}
   }
</script>

<style lang="less" rel="stylesheet/less" type="text/css">
	@import '../../../public/css/variable.less';
	.el-card{
		position: relative;
    	.trans(0.3s);
    	overflow: initial;
    	height: 360px;
    	margin-bottom: 60px;
    	.pro_img{
    		position: relative;
    		img{ width: 100%; height: 190px; }
	    	p{
	    		position: absolute;
			    bottom: 0;
			    left: 0;
			    padding: 10px;
			    color: #fff;
			    width: 100%;
			    box-sizing: border-box;
			    background: url(../../../public/images/o_gray2.png) repeat;
			    span{
			    	float: right;
			    }
	    	}
	    	&:before{
				content: "";
			    .trans(0.3s);
			    position: absolute;
			    top: 0;
			    left: 0;
			    width: 100%;
			    height: 190px;
			    background: #000;
			    opacity: 0;
			    border-top-left-radius: 5px;
			    border-top-right-radius: 5px;
			}
    	}
    	
		.pro_contant{
			.fonts(14px);
		    color: #5d5f63;
		    padding: 20px;
		    p{
		    	.cf();
		    	margin-bottom: 25px;
		    	margin-bottom: 25px;
	    		padding-left: 70px;
		    	span{
		    		display: inline-block;
				    float: left;
				    margin-left: -70px;
		    	}
		    	font{
		    		.fonts(20px);
		    	}
		    	&:nth-child(3){ 
		    		color: @cgolden;  
		    		span{ color: #5d5f63; }
		    	}
		    }
		    .search_more{
		    	position: absolute;
		    	left: 0;
		    	top: auto;
		    	bottom: -60px;
		    	color: @cw;
		    	text-align: center;
		    	width: 100%;
		    	padding-left: 0;
		    	.trans(0.3s);
		    	i{
		    		display: block;
		    		.fonts(24px);
		    		width: 40px;
		    		height: 40px;
		    		text-align: center;
		    		line-height: 40px;
		    		.bdr(50%);
		    		background: @cgolden;
		    		.bdr(50%);
		    		margin: 0 auto;
		    	}
		    	span{ 
		    		float: none;
		    		margin-left: 0;
		    		text-align: center; 
		    		padding-top: 10px;
		    		.fonts(0);
		    	}
		    }
		}
    	&:hover{ 
    		border-color: @cgolden;
    		box-shadow: 0 2px 4px 0 rgba(216,178,106,.12),0 0 6px 0 rgba(216,178,106,.04);
    		.pro_img{
    			&:before{
    				content: "";
				    opacity: 0.3;
    			}
    		}
    		.pro_contant{
    			.search_more{
    				bottom: auto;
    				top: 70px;
    				span{ .fonts(14px); }
    			}
    		}
    	}
    }
	.el-col-offset-3{ margin-left: 0; }
	.el-col-8{ padding: 0 1.2%; }
</style>